<template>
	<view class="mx-80">
		<uv-navbar auto-back placeholder />
		
		<text class="edit-password_title mt-50 block">修改密码</text>
		<text class="block text-32 mt-30">通过旧密码修改新的密码，修改完成后请妥善保管</text>
		<view class="block text-24 mt-10">当前已绑定：{{ mobile }}</view>
		
		<!-- 表单 -->
		<edit-password_form :is-password="true" ref="formRef" :is-old-mobile="true" />
		
		<!-- 按钮 -->
		<view class="mt-100">
			<fui-button text="确认修改" @click="onConfirm" />
		</view>	
	</view>
</template>

<script setup>
	
	import { ref, computed } from 'vue'
	import tools from '@/utils/index'
	
	import editPassword_form from './components/form'
	
	import { oldPasswordEdit } from '@/common/apis/account'
	
	const formRef = ref(null)  // 表单实例
	
	const mobile = computed(() => {
		const { user } = uni.$store()
		return tools.numberFormatter(user.userInfo?.mobile)
	})
	
	async function onConfirm() {
		const result = await formRef.value.verifyFrom()
		await oldPasswordEdit({ ...result, password: result.newPassword })
		uni.navigateTo({ url: `/pages/account/login?mobile=${result.oldMobile}`, success: () => uni.$fui.toast('重置密码成功~') })
	}
	
</script>

<style>page{background-color: #fff}</style>
<style scoped lang="scss">
	.edit-password_title{color: #3A3F5E;font-size: 48rpx}
	.block{color: #626780}
</style>